<template>
    <el-dialog
        :visible.sync="dialogVisible"
        :width="`${dialogWidth ? 620 : 300}px`"
        :before-close="handleCloseFS"
        class="addUserDialog"
    >
        <UserImg
            class="UserImg"
            :compdata="ruleForm"
            userType="userSelect"
            @click="showUserImgFS()"
        />
        <div class="UserImgDesc">( 点击切换用户头像 )</div>
        <div class="addUserDialogTable">
            <el-scrollbar
                class="addUserDialogFormBody"
                :native="false"
                wrapStyle=""
                wrapClass=""
                viewClass=""
                viewStyle=""
                :noresize="false"
            >
                <el-form
                    :model="ruleForm"
                    :rules="rules"
                    ref="ruleForm"
                    size="mini"
                    class="addUserDialogForm"
                >
                    <el-form-item label="用户名" prop="userName">
                        <el-input
                            placeholder="请输入用户名"
                            v-model="ruleForm.userName"
                        ></el-input>
                    </el-form-item>

                    <el-form-item label="密码" prop="userPsw">
                        <el-input
                            placeholder="请输入密码"
                            v-model="ruleForm.userPsw"
                            show-password
                        ></el-input>
                    </el-form-item>

                    <el-form-item label="标签" prop="userTag">
                        <el-select
                            style="width: 100%"
                            v-model="ruleForm.userTag"
                            placeholder="请选择用户标签"
                        >
                            <el-option
                                label="区域一"
                                value="shanghai"
                            ></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="用户简介" prop="userDesc">
                        <el-input
                            type="textarea"
                            placeholder="请输入用户简介"
                            v-model="ruleForm.userDesc"
                            maxlength="200"
                            show-word-limit
                        ></el-input>
                    </el-form-item>
                </el-form>
            </el-scrollbar>

            <el-scrollbar
                class="addUserDialogImgBody"
                :native="false"
                wrapStyle=""
                wrapClass=""
                viewClass=""
                viewStyle=""
                :noresize="false"
                :style="{
                    width: dialogWidth ? '280px' : '0px',
                }"
            >
                <div class="imgItemBody">
                    <div
                        v-for="(item, index) in $MMEV.userImgListData"
                        :key="index"
                        class="imgItem"
                        :class="{
                            imgItemSelect: item.data == ruleForm.userImage,
                        }"
                        @click="userImageFS(item)"
                    >
                        <img :src="item.url" />
                    </div>
                </div>
            </el-scrollbar>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button
                type="primary"
                size="mini"
                @click="handleOkFS('ruleForm')"
                style="width: 100%; font-size: 26px"
                class="footerBtn"
                icon="el-icon-s-check"
            ></el-button>
        </span>
    </el-dialog>
</template>

<script>
import UserImg from '@/components/userImg/userImg.vue';
import { addUser } from '@/api/userData';
import { mapActions, mapGetters } from 'vuex';

export default {
    components: {
        UserImg,
    },
    data() {
        return {
            dialogVisible: false,
            dialogWidth: false,
            ruleForm: {
                userName: undefined, // 名字
                userImage: 10, // 用户头像
                userPsw: undefined, // 用户密码
                userDesc: undefined, // 用户介绍
                userTag: undefined, // 用户标签
            },
            rules: {
                userName: [
                    {
                        required: true,
                        message: '请输入活动名称',
                        trigger: 'change',
                    },
                    {
                        min: 3,
                        max: 6,
                        message: '长度在 3 到 5 个字符',
                        trigger: 'change',
                    },
                ],
                userPsw: [
                    {
                        required: true,
                        message: '请输入密码',
                        trigger: 'change',
                    },
                    {
                        min: 6,
                        max: 15,
                        message: '长度在 6 到 15 个字符',
                        trigger: 'change',
                    },
                ],
            },
        };
    },
    computed: {
        ...mapGetters(['VUX_UserList']),
    },
    methods: {
        ...mapActions(['GetUserInfo']),
        openFS(data) {
            data = data || {};
            this.dialogWidth = false;
            this.dialogVisible = true;
            if (!data.userName) {
                this.resetForm('ruleForm');
            } else {
                this.ruleForm.userName = data.userName || undefined;
                this.ruleForm.userDesc = data.userDesc || undefined;
                this.ruleForm.userTag = data.userTag || undefined;
                this.ruleForm.userPsw = data.userPsw || undefined;
                this.ruleForm.userImage = data.userImage || 10;
            }
        },
        handleCloseFS(done) {
            if (!this.VUX_UserList.length) {
                this.$message({
                    // 错误
                    customClass: 'MMError',
                    type: 'error',
                    showClose: true,
                    message: '使用 MindMap 必须创建一个本地用户',
                });
            } else {
                this.dialogVisible = false;
            }
        },
        handleOkFS(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    addUser(this.ruleForm).then((result) => {
                        this.GetUserInfo();
                        this.dialogVisible = false;
                    });
                } else {
                    return false;
                }
            });
        },
        showUserImgFS() {
            this.dialogWidth = !this.dialogWidth;
        },
        userImageFS(data) {
            this.ruleForm.userImage = data.data;
        },
        resetForm(formName) {
            this.$refs[formName] && this.$refs[formName].resetFields();
        },
    },
};
</script>
<style lang="scss" scoped>
// 暗夜
@media (prefers-color-scheme: dark) {
}

// 正常
@media (prefers-color-scheme: light) {
}

.addUserDialog {
    .addUserDialogTable {
        height: 300px;
        width: 100%;
        display: flex;
        justify-content: space-around;
        .addUserDialogImgBody,
        .addUserDialogFormBody {
            width: 280px;
            height: 300px;
            overflow-y: auto;
            .addUserDialogForm {
            }
        }
        .addUserDialogImgBody {
            transition: width 0.3s;
            .imgItemBody {
                display: flex;
                flex-wrap: wrap;
                padding: 8px;
                padding-top: 30px;
                .imgItem {
                    width: 84px;
                    height: 84px;
                    margin-bottom: 16px;
                    cursor: pointer;
                    border-radius: 8px;
                    box-sizing: border-box;
                    padding: 8px;
                    img {
                        height: 100%;
                        width: auto;
                        margin: 0 auto;
                        display: block;
                    }
                }
                .imgItem:nth-child(3n-1) {
                    margin: 0 5px;
                    margin-bottom: 16px;
                }
                .imgItemSelect {
                    box-shadow: 0px 0px 6px #ca005d;
                }
            }
        }
    }
    .UserImgDesc {
        font-size: 12px;
        opacity: 0.7;
    }
    .addUserDialogTit {
        display: block;
        width: 60%;
        height: auto;
        margin: 0 auto;
        margin-bottom: 32px;
    }
    .footerBtn {
        background: linear-gradient(135deg, #ca005d, #883b99, #a91d7b) no-repeat;
        border-color: transparent;
    }
    .UserImg {
        width: 130px;
        height: 130px;
        margin: 0 auto;
    }
}
</style>
